<template>
    <div class="spec_form_container">
        <el-form ref="specForm" :model="formData" :rules="rules">
            <el-form-item label="规格名，例如：容量" prop="specification">
                <el-input v-model="formData.specification" placeholder="请输入规格名" />
            </el-form-item>
            <el-form-item label="规格值，可用逗号分割多个值，例如：1L,2L" prop="value">
                <el-input v-model="formData.value" placeholder="请输入规格值" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "SpecForm",
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            formData: {},
            rules: {
                specification: [ { required: true, message: '请输入规格名' } ],
                value: [ { required: true, message: '请输入规格名' } ],
            },
        };
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            if (_this.$refs.specForm) {
                _this.$refs.specForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.row);
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('specForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.formData);
            return _this.fetchData(_this.$api.API_SaveJxcGoodsSpecification, subData).then(result => {
                _this.$message.success('保存成功！');
                return result.data;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
